/* 
// name ColorStyle
// web ufobank.cn
// author Xiaokang
// color style
// QQ 51453453
// vision 1.2
// Time 2020/11/30
// Update 2021/8/4*/

@mixin select-style{
		transition: all 0.8s;
		animation-duration:8s;
		animation-iteration-count: infinite;
}
// @import "hover-style";
//null
// selector
		.border-a,.border-a-hover:hover{
			transition: all 0.8s;
			@include select-style;
			animation-name: border-a;
			animation-duration:3s;    
			border:3px solid #ddd;
			border-image: linear-gradient(to left, #ff557f, #00aaff, #aa55ff, #fff14f) 20 20;	
		}
		.border-b,.border-b-hover:hover{
			@include select-style;
			transition: all 0.8s;
			animation-name: border-b;
			animation-duration:8s;
		}	
		.border-c,.border-c-hover:hover{
			@include select-style;
			transition: all 0.8s;
			animation-name: border-c;
			animation-duration:1.5s;
			border:3px dotted #ddd;
			border-image: linear-gradient(to left,#ff557f, #00aa7f, #00aaff, #aa55ff) 20 20;
		}
		.border-d,.border-d-hover:hover{
			@include select-style;
			transition: all 0.8s;
			animation-name: border-d;
			animation-duration:3s;
			border:3px solid #ddd;
			border-image: linear-gradient(to left,#ff557f, #00aa7f, #00aaff, #aa55ff) 20 20;
		}
		.border-e,.border-e-hover:hover{
			@include select-style;
			transition: all 0.8s;
			animation-name: border-e;
			animation-duration:8s;
			border:3px solid #ddd;
			border-image: linear-gradient(#ff557f,#ff5500) 30 30;
			
		}
		//shadow
		.shadow-a,.shadow-a-hover:hover{
			@include select-style;
			animation-name: shadow-a;
			animation-duration:12s;
		}
		.shadow-b,.shadow-b-hover:hover{
			@include select-style;
			animation-name: shadow-b;
			animation-duration:8s;
			
		}
		.shadow-c,.shadow-c-hover:hover{
			@include select-style;
			animation-name: shadow-c;
			animation-duration:12s;
		}
		.shadow-d,.shadow-d-hover:hover{
			@include select-style;
			animation-name: shadow-d;
			animation-duration:12s;
		}
		.shadow-e,.shadow-e-hover:hover{
			@include select-style;
			animation-name: shadow-e;
			animation-duration:12s;
		}
		// neumo
		.neumo-f,.neumo-f-hover:hover{
			@include select-style;
			animation-name: neumo-f;
			animation-duration:12s;
		}
		.neumo-g,.neumo-g-hover:hover{
			@include select-style;
			animation-name: neumo-g;
			animation-duration:18s;
		}
		.neumo-h,.neumo-h-hover:hover{
			@include select-style;
			animation-name: neumo-h;
			animation-duration:12s;
		}
		.neumo-i,.neumo-i-hover:hover{
			@include select-style;
			animation-name: neumo-i;
			animation-duration:12s;
		}
		.neumo-j,.neumo-j-hover:hover{
			@include select-style;
			animation-name: neumo-j;
			animation-duration:12s;
		}
		
		.bgcolor-a,.bgcolor-a-hover:hover{
			@include select-style;
			animation-name: bgcolor-a;
			animation-duration:22s;
		}
		.bgcolor-b,.bgcolor-b-hover:hover{
			@include select-style;
			animation-name: bgcolor-b;
			animation-duration:10s;
			background-repeat: no-repeat;
			background-size: 200%;
			transition: all 1s;
			background-image: linear-gradient(to left, #ff557f, #00aaff, #aa55ff);
			// background: linear-gradient(150deg,#ff557f, #00aa7f, #00aaff, #aa55ff);
			
		}
		.bgcolor-c,.bgcolor-c-hover:hover{
			@include select-style;
			animation-name: bgcolor-c;
			animation-duration:30s;
		}
		.bgcolor-d,.bgcolor-d-hover:hover{
			@include select-style;
			animation-name: bgcolor-d;
			animation-duration:5s;
			animation-timing-function:linear;
			background: linear-gradient(136deg,#ff5500, #00ff00, #00aaff, #ff557f, #aa55ff, #00aa7f);
		}
		.bgcolor-e,.bgcolor-e-hover:hover{
			@include select-style;
			animation-name: bgcolor-e;
			animation-duration:5s;
			background: linear-gradient(150deg,#ff557f, #00aa7f, #00aaff, #aa55ff);
			// animation: bgcolor-e 10s linear infinite;
		}
		
		.text-a,.text-a-hover:hover{
			@include select-style;
			animation-name: text-a;
			animation-duration:8s;
		}
		.text-b,.text-b-hover:hover{
			@include select-style;
			animation-name: text-b;
			animation-duration:8s;
		}
		.text-c,.text-c-hover:hover{
			@include select-style;
			animation-name: text-c;
			animation-duration:8s;
		}
		.text-d,.text-d-hover:hover{
			@include select-style;
			animation-name: text-d;
			animation-duration:5s;
		}
		.text-e,.text-e-hover:hover{
			@include select-style;
			animation-name: text-e;
			animation-duration:6.6s;
		}
		.text-f,.text-f-hover:hover{
			@include select-style;
			transition: all 0.6s;
			animation-name: text-f;
			animation-duration:8s;
		}
		
		.dance-move-a,.dance-move-a-hover:hover{
			animation-duration:18s;
			animation-name: move-a;
			animation-iteration-count: infinite;
			animation-timing-function:linear;
		}
		.dance-move-b,.dance-move-b-hover:hover{
			animation-duration:18s;
			animation-name: move-b;
			animation-iteration-count: infinite;
			animation-timing-function:linear;
		}
		.dance-move-c,.dance-move-c-hover:hover{
			animation-duration:18s;
			animation-name: move-c;
			animation-iteration-count: infinite;
			animation-timing-function:linear;
		}
		.dance-move-d,.dance-move-d-hover:hover{
			animation-duration:18s;
			animation-name: move-d;
			animation-iteration-count: infinite;
			animation-timing-function:linear;
		}
		.dance-move-e,.dance-move-e-hover:hover{
			animation-duration:18s;
			animation-name: move-e;
			animation-iteration-count: infinite;
			animation-timing-function:linear;
		}
		
		//moves
		.dance-moves,.dance-moves-hover:hover{
			animation-name: moves;
			animation-duration:5s;
			animation-iteration-count: infinite;
		}
		.dance-rotate,.dance-rotate-hover:hover{
			animation-name: rotate;
			animation-duration:5s;
			animation-iteration-count: infinite;
		}
		.dance-heart,.dance-heart-hover:hover{
			animation-name: heart;
			animation-duration:5s;
			animation-iteration-count: infinite;
		}
		.dance-ring,.dance-ring-hover:hover{
			animation-name: ring;
			animation-duration:0.5s;
			animation-iteration-count: infinite;
		}
		.dance-shake,.dance-shake-hover:hover{
			animation-name: shake;
			animation-duration:0.1s;
			animation-iteration-count: infinite;
		}
							
		// neumo-style
		.neumo-a,.neumo-a-hover:hover{
			// border-radius: 20px;
			box-shadow: 18px 18px 30px #d1d9e6, -18px -18px 30px #fff;
		}
		.neumo-b,.neumo-b-hover:hover{
			// border-radius: 20px;
			box-shadow: inset 18px 18px 30px #d1d9e6, inset -18px -18px 30px #fff;
		}
		.neumo-c,.neumo-c-hover:hover{
			// border-radius: 100%;
			box-shadow: inset 9px 9px 15px #d1d9e6, inset -9px -9px 15px #fff;
		}
		.neumo-d,.neumo-d-hover:hover{
			// border-radius: 29px;
			background: linear-gradient(145deg, #e6e6e6, #ffffff);
			box-shadow:  23px 23px 45px #d9d9d9, 
			             -23px -23px 45px #ffffff;
		}
		.neumo-e,.neumo-e-hover:hover{
			// border-radius: 31px;
			background: linear-gradient(145deg, #ffffff, #e6e6e6);
			box-shadow:  28px 28px 100px #bababa, 
			             -28px -28px 100px #ffffff;
		}
		@keyframes moves{
			0%{
				transform: translate(0px,0px);
			}
			25%{
				transform: translate(9px,0px);
			}
			50%{
				transform: translate(-12px,0px);
			}
			75%{
				transform: translate(6px,0px);
			}
			100%{
				transform: translate(0px,0px);
			}
		}
		@keyframes rotate{
			0%{
				transform: rotate(0deg);
			}
			25%{
				transform: rotate(180deg);
			}
			50%{
				transform: rotate(360deg);
				transform:scale(1.05);
			}
			75%{
				transform: rotate(180deg);
			}
			100%{
				transform: rotate(0deg);
			}
		}
		@keyframes heart{
			0%{
				transform:scale(1);
			}
			25%{
				transform:scale(1.4);
			}
			50%{
				transform:scale(1);
			}
			75%{
				transform:scale(1.4);
			}
			100%{
				transform:scale(1);
			}
		}
		@keyframes ring{
			0%{
				transform:scale(1);
				transform: rotate(8deg);
			}
			25%{
				transform: rotate(-8deg);
			}
			50%{
				transform: rotate(8deg);
				transform:scale(1.1);
			}
			75%{
				transform: rotate(-8deg);
			}
			100%{
				transform:scale(1);
				transform: rotate(8deg);
			}
		}
		@keyframes shake{
			0%{
				transform: rotate(5deg);
			}
			25%{
				transform: rotate(-5deg);
			}
			50%{
				transform: rotate(5deg);
			}
			75%{
				transform: rotate(-5deg);
			}
			100%{
				transform: rotate(5deg);
			}
		}
		// moves
		@keyframes move-a{
			0%{
				transform: translate(-2px,30px);
			}
			25%{
				transform: translate(-2px,60px);
				transform: rotate(3deg);
			}
			50%{
				transform:scale(1.1);
				transform: translate(-2px,30px);
			}
			75%{
				transform: translate(-2px,80px);
				transform: rotate(3deg);
				transform:scale(1.3);
			}
			100%{
				transform: translate(-2px,30px);
			}
		}
		@keyframes move-b{
			0%{
				transform: translate(-2px,0px);
			}
			25%{
				transform: translate(-2px,30px);
			}
			50%{
				transform: translate(-2px,77px);
			}
			75%{
				transform: translate(-2px,14px);
			}
			100%{
				transform: translate(-2px,0px);
			}
		}
		@keyframes move-c{
			0%{
				transform: translate(-2px,2px);
			}
			25%{
				transform: translate(-10px,10px);
			}
			50%{
				transform: translate(-30px,30px);
			}
			75%{
				transform: translate(-7px,70px);
			}
			100%{
				transform: translate(-2px,2px);
			}
		}
		@keyframes move-d{
			0%{
				transform: translate(0px,0px);
			}
			25%{
				transform: translate(40px,0px);
			}
			50%{
				transform: translate(80px,0px);
			}
			75%{
				transform: translate(120px,0px);
			}
			100%{
				transform: translate(0px,0px);
			}
		}
		@keyframes move-e{
			0%{
				transform: translate(-20px,-20px);
			}
			25%{
				transform: translate(-50px,-50px);
			}
			50%{
				transform: translate(-70px,-70px);
			}
			75%{
				transform: translate(-90px,-90px);
			}
			100%{
				transform: translate(-20px,-20px);
			}
		}
		//back color
		@keyframes bgcolor-a{
			0%{
				background-color: #00AA7F;
			}
			12%{
				background-color: #aa55ff;
			}
			25%{
				background-color: #ffaa7f;
			}
			50%{
				background-color: #aaaa00;
			}
			75%{
				background-color: #00aaff;
			}
			100%{
				background-color: #00aa7f;
			}
		}
		@keyframes bgcolor-b{
			0%{
				background-position: left;
			}
			// 12%{
			// 	background-position: right;
			// }
			25%{
				background-position: top;
			}
			50%{
				background-position: right;
			}
			75%{
				background-position: bottom;
			}
			100%{
				background-position: left;
			}
		}
		@keyframes bgcolor-c{
			0%{
				background-color: #00aaff;
			}
			10%{
				background-color: #0076b1;
			}
			20%{
				background-color: #aa55ff;
			}
			30%{
				background-color: #7b3db9;
			}
			40%{
				background-color: #00ff7f;
			}
			50%{
				background-color: #00b557;
			}
			60%{
				background-color: #ffaa7f;
			}
			70%{
				background-color: #bd7e5e;
			}
			80%{
				background-color: #ff557f;
			}
			90%{
				background-color: #b83d5c;
			}
			100%{
				background-color: #00aaff;
			}
		}
		@keyframes bgcolor-d{
			100%{
				filter: hue-rotate(360deg);
				// transform: rotate(360deg);
			}
		}
		@keyframes bgcolor-e{
			// 0%{
			// 	// filter: hue-rotate(0deg);
			// 	// transform: rotate(0deg);
			// }
			// 50%{
			// 	// filter: hue-rotate(180deg);
			// 	// transform: rotate(180deg);
			// }
			100%{
				filter: hue-rotate(360deg);
				// transform: rotate(360deg);
			}
			// 0%{
			// 	background: linear-gradient(0deg,#ff557f, #00aa7f, #00aaff, #aa55ff);
			// }
			// 0%{
			// 	background: linear-gradient(180deg,#ff557f, #00aa7f, #00aaff, #aa55ff);
			// }
			// 100%{
			// 	background: linear-gradient(360deg,#ff557f, #00aa7f, #00aaff, #aa55ff);
			// }
		}
		
		// shadow
		@keyframes shadow-a{
			0%{
				box-shadow: 0px 0px 5px #55AA7F;
			}
			10%{
				box-shadow: 0px 0px 15px #00aa7f;
			}
			25%{
				box-shadow: 0px 0px 5px #ff557f;
			}
			35%{
				box-shadow: 0px 0px 15px #ff5500;
			}
			50%{
				box-shadow: 0px 0px 5px #00aaff;
			}
			65%{
				box-shadow: 0px 0px 15px #16eccc;
			}
			75%{
				box-shadow: 0px 0px 5px #aa55ff;
			}
			85%{
				box-shadow: 0px 0px 15px #b8a0ff;
			}
			100%{
				box-shadow: 0px 0px 5px #55AA7F;
			}
		}
		@keyframes shadow-b{
			0%{
				box-shadow: 0px 0px 20px #ff557f;	
			}
			25%{
				box-shadow: 0px 5px 20px #00aa7f;
			}
			50%{
				box-shadow: 0px -5px 20px #00aaff;
			}	
			70%{
				box-shadow: -5px 0px 20px #aa55ff;
			}
			90%{
				box-shadow: 0px 5px 20px #ffaa7f;
			}
			100%{
				box-shadow: 0px 0px 20px #ff557f;
			}
		}
		@keyframes shadow-c{
			0%{
				box-shadow: 0px 0px 6px #aaff00;
			}
			10%{
				box-shadow: 0px 0px 15px #ffaa7f;
			}
			25%{
				box-shadow: 0px 0px 6px #00aaff;
			}
			35%{
				box-shadow: 0px 0px 15px #ffaaff;
			}
			50%{
				box-shadow: 0px 0px 6px #ff557f;
			}
			65%{
				box-shadow: 0px 0px 15px #55557f;
			}
			75%{
				box-shadow: 0px 0px 6px #00aa7f;
			}
			85%{
				box-shadow: 0px 0px 15px #aaaa00;
			}
			100%{
				box-shadow: 0px 0px 6px #aaff00;
			}
		}
		@keyframes shadow-d{
			0%{
				box-shadow: 0px 0px 15px #ffaa00;
			}
			25%{
				box-shadow: 0px 0px 15px #00aaff;
			}
			50%{
				box-shadow: 0px 0px 15px #ff5500;
			}
			75%{
				box-shadow: 0px 0px 15px #1adc10;
			}
			100%{
				box-shadow: 0px 0px 15px #ffaa00;
			}
		}
		@keyframes shadow-e{
			0%{
				box-shadow: 0px 0px 5px #69349e;
			}
			10%{
				box-shadow: 0px 0px 15px #aa55ff;
			}
			25%{
				box-shadow: 0px 0px 5px #006598;
			}
			35%{
				box-shadow: 0px 0px 15px #00aaff;
			}
			50%{
				box-shadow: 0px 0px 5px #a23651;
			}
			65%{
				box-shadow: 0px 0px 15px #ff557f;
			}
			75%{
				box-shadow: 0px 0px 5px #00ad53;
			}
			85%{
				box-shadow: 0px 0px 15px #00ff7f;
			}
			100%{
				box-shadow: 0px 0px 5px #69349e;
			}
		}
		//border
		@keyframes border-a{
			100%{
				filter: hue-rotate(360deg);
				// transform: rotate(360deg);
			}
		}
		@keyframes border-b{
			0%{
				border: 2px solid #00aaff;
			}
			25%{
				border: 2px solid #aa55ff;
			}
			50%{
				border: 2px solid #00ff7f;
			}
			75%{
				border: 2px solid #ff557f;
			}
			100%{
				border: 2px solid #00aaff;
			}
		}
		@keyframes border-c{
			100%{
				filter: hue-rotate(360deg);
				// transform: rotate(360deg);
			}
		}
		@keyframes border-d{
			100%{
				filter: hue-rotate(360deg);
				// transform: rotate(360deg);
			}
		}
		@keyframes border-e{
			100%{
				filter: hue-rotate(360deg);
				// transform: rotate(360deg);
			}
		}
		// neumo
		@keyframes neumo-f{
			0%{
				box-shadow: 8px 8px 14px #ffaa00, -8px -8px 14px #ffffff; 
			}
			10%{
				box-shadow: 10px 10px 18px #55aa7f, -10px -10px 18px #ffffff; 
			}
			25%{
				box-shadow: 5px 5px 12px #55aa7f, -5px -5px 12px #ffffff;  
			}
			35%{
				box-shadow: 10px 10px 18px #ff557f, -10px -10px 18px #ffffff; 
			}
			50%{
				box-shadow: 5px 5px 12px #ff557f, -5px -5px 12px #ffffff;  
			}
			65%{
				box-shadow: 10px 10px 18px #00aaff, -10px -10px 18px #ffffff; 
			}
			75%{
				box-shadow: 5px 5px 12px #00aaff, -5px -5px 12px #ffffff;  
			}
			85%{
				box-shadow: 10px 10px 18px #ffaa00, -10px -10px 18px #ffffff; 
			}
			100%{
				box-shadow: 8px 8px 14px #ffaa00, -8px -8px 14px #ffffff;
			}
		}
		@keyframes neumo-g{
			0%{
				background-color: #00AAFF;
				box-shadow: 8px 8px 14px #ffaa00, -8px -8px 14px #ffffff; 
			}
			10%{
				background-color: #ff557f;
				box-shadow: 10px 10px 18px #55aa7f, -10px -10px 18px #ffffff; 
			}
			25%{
				background-color: #00aa7f;
				box-shadow: 5px 5px 12px #55aa7f, -5px -5px 12px #ffffff;  
			}
			35%{
				background-color: #aa55ff;
				box-shadow: 10px 10px 18px #ff557f, -10px -10px 18px #ffffff; 
			}
			50%{
				background-color: #ffaa00;
				box-shadow: 5px 5px 12px #ff557f, -5px -5px 12px #ffffff;  
			}
			65%{
				background-color: #aaff7f;
				box-shadow: 10px 10px 18px #00aaff, -10px -10px 18px #ffffff; 
			}
			75%{
				background-color: #aa557f;
				box-shadow: 5px 5px 12px #00aaff, -5px -5px 12px #ffffff;  
			}
			85%{
				background-color: #aaaa00;
				box-shadow: 10px 10px 18px #ffaa00, -10px -10px 18px #ffffff; 
			}
			100%{
				background-color: #00AAFF;
				box-shadow: 8px 8px 14px #ffaa00, -8px -8px 14px #ffffff; 
			}
		}
		@keyframes neumo-h{
			0%{
				box-shadow: 8px 8px 14px #aaaa00, -8px -8px 14px #ffffff; 
			}
			10%{
				box-shadow: 10px 10px 18px #aa55ff, -10px -10px 18px #ffffff; 
			}
			25%{
				box-shadow: 5px 5px 12px #aa55ff, -5px -5px 12px #ffffff;  
			}
			35%{
				box-shadow: 10px 10px 18px #00aa00, -10px -10px 18px #ffffff; 
			}
			50%{
				box-shadow: 5px 5px 12px #00aa00, -5px -5px 12px #ffffff;  
			}
			65%{
				box-shadow: 10px 10px 18px #ff5500, -10px -10px 18px #ffffff; 
			}
			75%{
				box-shadow: 5px 5px 12px #ff5500, -5px -5px 12px #ffffff;  
			}
			85%{
				box-shadow: 10px 10px 18px #00aaff, -10px -10px 18px #ffffff; 
			}
			100%{
				box-shadow: 8px 8px 14px #aaaa00, -8px -8px 14px #ffffff;
			}
		}
		@keyframes neumo-i{
			0%{
				box-shadow: 8px 8px 14px #ff557f, -8px -8px 14px #ffffff; 
			}
			10%{
				box-shadow: 10px 10px 18px #aa55ff, -10px -10px 18px #ffffff; 
			}
			25%{
				box-shadow: 5px 5px 12px #00aa7f, -5px -5px 12px #ffffff;  
			}
			35%{
				box-shadow: 10px 10px 18px #00aaff, -10px -10px 18px #ffffff; 
			}
			50%{
				box-shadow: 5px 5px 12px #aaaa00, -5px -5px 12px #ffffff;  
			}
			65%{
				box-shadow: 10px 10px 18px #aa557f, -10px -10px 18px #ffffff; 
			}
			75%{
				box-shadow: 5px 5px 12px #ffaa7f, -5px -5px 12px #ffffff;  
			}
			85%{
				box-shadow: 10px 10px 18px #00aa7f, -10px -10px 18px #ffffff; 
			}
			100%{
				box-shadow: 8px 8px 14px #ff557f, -8px -8px 14px #ffffff; 
			}
		}
		@keyframes neumo-j{
			0%{
				box-shadow: 8px 8px 14px #ffaa00, -8px -8px 14px #ffffff; 
			}
			10%{
				box-shadow: 5px 5px 12px #00aaff, -5px -5px 12px #ffffff; 
			}
			25%{
				box-shadow: 10px 10px 18px #55aa7f, -10px -10px 18px #ffffff; 
			}
			35%{
				box-shadow: 5px 5px 12px #00aaff, -5px -5px 12px #ffffff; 
			}
			50%{ 
				box-shadow: 10px 10px 18px #55aa7f, -10px -10px 18px #ffffff; 
			}
			65%{
				box-shadow: 5px 5px 12px #00aaff, -5px -5px 12px #ffffff;
			}
			75%{
				box-shadow: 10px 10px 18px #55aa7f, -10px -10px 18px #ffffff; 
			}
			85%{
				box-shadow: 5px 5px 12px #00aaff, -5px -5px 12px #ffffff;
			}
			100%{
				box-shadow: 8px 8px 14px #ffaa00, -8px -8px 14px #ffffff; 
			}
		}
		//text
		@keyframes text-a{
			2% {
				transform: translate(1.5px, 1.5px) rotate(1.5deg)
			}
		
			4% {
				transform: translate(.5px, -.5px) rotate(.5deg)
			}
		
			6% {
				transform: translate(1.5px, 2.5px) rotate(1.5deg)
			}
		
			8% {
				transform: translate(.5px, 2.5px) rotate(.5deg)
			}
		
			10% {
				transform: translate(2.5px, 1.5px) rotate(.5deg)
			}
		
			12% {
				transform: translate(-.5px, -1.5px) rotate(-.5deg)
			}
		
			14% {
				transform: translate(1.5px, 2.5px) rotate(-.5deg)
			}
		
			16% {
				transform: translate(2.5px, -1.5px) rotate(1.5deg)
			}
		
			18% {
				transform: translate(2.5px, 2.5px) rotate(-.5deg)
			}
		
			20% {
				transform: translate(-.5px, -1.5px) rotate(1.5deg)
			}
		
			22% {
				transform: translate(-1.5px, -.5px) rotate(.5deg)
			}
		
			24% {
				transform: translate(2.5px, -1.5px) rotate(1.5deg)
			}
		
			26% {
				transform: translate(.5px, 2.5px) rotate(1.5deg)
			}
		
			28% {
				transform: translate(-.5px, 2.5px) rotate(-.5deg)
			}
		
			30% {
				transform: translate(.5px, 2.5px) rotate(1.5deg)
			}
		
			32% {
				transform: translate(-1.5px, -.5px) rotate(-.5deg)
			}
		
			34% {
				transform: translate(.5px, -.5px) rotate(.5deg)
			}
		
			36% {
				transform: translate(-1.5px, .5px) rotate(1.5deg)
			}
		
			38% {
				transform: translate(-1.5px, 1.5px) rotate(1.5deg)
			}
		
			40% {
				transform: translate(2.5px, .5px) rotate(.5deg)
			}
		
			42% {
				transform: translate(.5px, .5px) rotate(1.5deg)
			}
		
			44% {
				transform: translate(-.5px, .5px) rotate(.5deg)
			}
		
			46% {
				transform: translate(2.5px, 1.5px) rotate(1.5deg)
			}
		
			48% {
				transform: translate(2.5px, 1.5px) rotate(-.5deg)
			}
		
			50% {
				transform: translate(-1.5px, 2.5px) rotate(-.5deg)
			}
		
			52% {
				transform: translate(.5px, -1.5px) rotate(1.5deg)
			}
		
			54% {
				transform: translate(.5px, -1.5px) rotate(.5deg)
			}
		
			56% {
				transform: translate(1.5px, -1.5px) rotate(-.5deg)
			}
		
			58% {
				transform: translate(1.5px, .5px) rotate(.5deg)
			}
		
			60% {
				transform: translate(-.5px, .5px) rotate(.5deg)
			}
		
			62% {
				transform: translate(.5px, .5px) rotate(-.5deg)
			}
		
			64% {
				transform: translate(-1.5px, -.5px) rotate(1.5deg)
			}
		
			66% {
				transform: translate(-1.5px, 2.5px) rotate(-.5deg)
			}
		
			68% {
				transform: translate(-1.5px, 1.5px) rotate(.5deg)
			}
		
			70% {
				transform: translate(.5px, 1.5px) rotate(.5deg)
			}
		
			72% {
				transform: translate(-1.5px, 2.5px) rotate(.5deg)
			}
		
			74% {
				transform: translate(2.5px, .5px) rotate(-.5deg)
			}
		
			76% {
				transform: translate(.5px, -1.5px) rotate(1.5deg)
			}
		
			78% {
				transform: translate(.5px, 1.5px) rotate(.5deg)
			}
		
			80% {
				transform: translate(-.5px, -.5px) rotate(.5deg)
			}
		
			82% {
				transform: translate(1.5px, 1.5px) rotate(1.5deg)
			}
		
			84% {
				transform: translate(.5px, .5px) rotate(.5deg)
			}
		
			86% {
				transform: translate(-.5px, .5px) rotate(1.5deg)
			}
		
			88% {
				transform: translate(1.5px, .5px) rotate(1.5deg)
			}
		
			90% {
				transform: translate(-.5px, 2.5px) rotate(-.5deg)
			}
		
			92% {
				transform: translate(-1.5px, -1.5px) rotate(1.5deg)
			}
		
			94% {
				transform: translate(-1.5px, 2.5px) rotate(1.5deg)
			}
		
			96% {
				transform: translate(-1.5px, -1.5px) rotate(1.5deg)
			}
		
			98% {
				transform: translate(1.5px, -1.5px) rotate(1.5deg)
			}
		
			0%,100% {
				transform: translate(0, 0) rotate(0)
			}
		}
		@keyframes text-b{
			2% {
				transform: translate(1px, 1px) rotate(.5deg)
			}
		
			4% {
				transform: translate(0px, 1px) rotate(.5deg)
			}
		
			6% {
				transform: translate(0px, 0px) rotate(.5deg)
			}
		
			8% {
				transform: translate(0px, 1px) rotate(.5deg)
			}
		
			10% {
				transform: translate(0px, 1px) rotate(.5deg)
			}
		
			12% {
				transform: translate(1px, 0px) rotate(.5deg)
			}
		
			14% {
				transform: translate(0px, 0px) rotate(.5deg)
			}
		
			16% {
				transform: translate(0px, 1px) rotate(.5deg)
			}
		
			18% {
				transform: translate(1px, 0px) rotate(.5deg)
			}
		
			20% {
				transform: translate(0px, 1px) rotate(.5deg)
			}
		
			22% {
				transform: translate(1px, 1px) rotate(.5deg)
			}
		
			24% {
				transform: translate(1px, 0px) rotate(.5deg)
			}
		
			26% {
				transform: translate(0px, 1px) rotate(.5deg)
			}
		
			28% {
				transform: translate(1px, 1px) rotate(.5deg)
			}
		
			30% {
				transform: translate(0px, 1px) rotate(.5deg)
			}
		
			32% {
				transform: translate(1px, 1px) rotate(.5deg)
			}
		
			34% {
				transform: translate(1px, 0px) rotate(.5deg)
			}
		
			36% {
				transform: translate(0px, 1px) rotate(.5deg)
			}
		
			38% {
				transform: translate(0px, 1px) rotate(.5deg)
			}
		
			40% {
				transform: translate(0px, 0px) rotate(.5deg)
			}
		
			42% {
				transform: translate(0px, 1px) rotate(.5deg)
			}
		
			44% {
				transform: translate(1px, 0px) rotate(.5deg)
			}
		
			46% {
				transform: translate(0px, 0px) rotate(.5deg)
			}
		
			48% {
				transform: translate(1px, 0px) rotate(.5deg)
			}
		
			50% {
				transform: translate(1px, 0px) rotate(.5deg)
			}
		
			52% {
				transform: translate(0px, 0px) rotate(.5deg)
			}
		
			54% {
				transform: translate(1px, 0px) rotate(.5deg)
			}
		
			56% {
				transform: translate(0px, 1px) rotate(.5deg)
			}
		
			58% {
				transform: translate(1px, 1px) rotate(.5deg)
			}
		
			60% {
				transform: translate(0px, 1px) rotate(.5deg)
			}
		
			62% {
				transform: translate(0px, 0px) rotate(.5deg)
			}
		
			64% {
				transform: translate(1px, 1px) rotate(.5deg)
			}
		
			66% {
				transform: translate(0px, 0px) rotate(.5deg)
			}
		
			68% {
				transform: translate(1px, 0px) rotate(.5deg)
			}
		
			70% {
				transform: translate(1px, 0px) rotate(.5deg)
			}
		
			72% {
				transform: translate(1px, 0px) rotate(.5deg)
			}
		
			74% {
				transform: translate(0px, 0px) rotate(.5deg)
			}
		
			76% {
				transform: translate(0px, 0px) rotate(.5deg)
			}
		
			78% {
				transform: translate(0px, 1px) rotate(.5deg)
			}
		
			80% {
				transform: translate(0px, 1px) rotate(.5deg)
			}
		
			82% {
				transform: translate(1px, 0px) rotate(.5deg)
			}
		
			84% {
				transform: translate(1px, 0px) rotate(.5deg)
			}
		
			86% {
				transform: translate(1px, 0px) rotate(.5deg)
			}
		
			88% {
				transform: translate(0px, 0px) rotate(.5deg)
			}
		
			90% {
				transform: translate(0px, 1px) rotate(.5deg)
			}
		
			92% {
				transform: translate(1px, 1px) rotate(.5deg)
			}
		
			94% {
				transform: translate(1px, 0px) rotate(.5deg)
			}
		
			96% {
				transform: translate(1px, 0px) rotate(.5deg)
			}
		
			98% {
				transform: translate(1px, 0px) rotate(.5deg)
			}
		
			0%,100% {
				transform: translate(0, 0) rotate(0)
			}
		}
		@keyframes text-c{
			2% {
				transform: translate(6px, -6px) rotate(2.5deg)
			}
			
			4% {
				transform: translate(-5px, 1px) rotate(1.5deg)
			}
			
			6% {
				transform: translate(7px, -3px) rotate(-2.5deg)
			}
			
			8% {
				transform: translate(-7px, -5px) rotate(2.5deg)
			}
			
			10% {
				transform: translate(-3px, 2px) rotate(-1.5deg)
			}
			
			12% {
				transform: translate(3px, 6px) rotate(3.5deg)
			}
			
			14% {
				transform: translate(-7px, 2px) rotate(-1.5deg)
			}
			
			16% {
				transform: translate(-6px, 6px) rotate(-2.5deg)
			}
			
			18% {
				transform: translate(6px, 0px) rotate(1.5deg)
			}
			
			20% {
				transform: translate(9px, 9px) rotate(2.5deg)
			}
			
			22% {
				transform: translate(7px, -9px) rotate(2.5deg)
			}
			
			24% {
				transform: translate(2px, 1px) rotate(.5deg)
			}
			
			26% {
				transform: translate(10px, 4px) rotate(-.5deg)
			}
			
			28% {
				transform: translate(-9px, 3px) rotate(3.5deg)
			}
			
			30% {
				transform: translate(10px, 5px) rotate(1.5deg)
			}
			
			32% {
				transform: translate(6px, 8px) rotate(-2.5deg)
			}
			
			34% {
				transform: translate(9px, 9px) rotate(3.5deg)
			}
			
			36% {
				transform: translate(-5px, 0px) rotate(-.5deg)
			}
			
			38% {
				transform: translate(-2px, -2px) rotate(.5deg)
			}
			
			40% {
				transform: translate(-3px, 8px) rotate(2.5deg)
			}
			
			42% {
				transform: translate(-7px, 8px) rotate(3.5deg)
			}
			
			44% {
				transform: translate(6px, -6px) rotate(.5deg)
			}
			
			46% {
				transform: translate(1px, -2px) rotate(3.5deg)
			}
			
			48% {
				transform: translate(-5px, 7px) rotate(-2.5deg)
			}
			
			50% {
				transform: translate(-8px, 1px) rotate(2.5deg)
			}
			
			52% {
				transform: translate(-9px, -2px) rotate(1.5deg)
			}
			
			54% {
				transform: translate(4px, -9px) rotate(3.5deg)
			}
			
			56% {
				transform: translate(-6px, -1px) rotate(.5deg)
			}
			
			58% {
				transform: translate(-3px, -6px) rotate(-.5deg)
			}
			
			60% {
				transform: translate(8px, 4px) rotate(-.5deg)
			}
			
			62% {
				transform: translate(0px, -9px) rotate(.5deg)
			}
			
			64% {
				transform: translate(9px, -2px) rotate(3.5deg)
			}
			
			66% {
				transform: translate(-7px, 10px) rotate(3.5deg)
			}
			
			68% {
				transform: translate(-7px, -9px) rotate(-1.5deg)
			}
			
			70% {
				transform: translate(9px, -2px) rotate(-2.5deg)
			}
			
			72% {
				transform: translate(-4px, 0px) rotate(2.5deg)
			}
			
			74% {
				transform: translate(1px, -2px) rotate(-1.5deg)
			}
			
			76% {
				transform: translate(-8px, -5px) rotate(2.5deg)
			}
			
			78% {
				transform: translate(-9px, 2px) rotate(1.5deg)
			}
			
			80% {
				transform: translate(-4px, 1px) rotate(-1.5deg)
			}
			
			82% {
				transform: translate(-6px, 10px) rotate(2.5deg)
			}
			
			84% {
				transform: translate(6px, -3px) rotate(-.5deg)
			}
			
			86% {
				transform: translate(-1px, -2px) rotate(1.5deg)
			}
			
			88% {
				transform: translate(1px, 9px) rotate(1.5deg)
			}
			
			90% {
				transform: translate(3px, 9px) rotate(-.5deg)
			}
			
			92% {
				transform: translate(-3px, -1px) rotate(.5deg)
			}
			
			94% {
				transform: translate(-7px, 4px) rotate(1.5deg)
			}
			
			96% {
				transform: translate(6px, 1px) rotate(.5deg)
			}
			
			98% {
				transform: translate(-8px, 2px) rotate(-.5deg)
			}
			
			0%,100% {
				transform: translate(0, 0) rotate(0)
			}
		}
		@keyframes text-d{
			2% {
				transform: translate(0, 0) rotate(6.5deg)
			}
			
			4% {
				transform: translate(0, 0) rotate(5.5deg)
			}
			
			6% {
				transform: translate(0, 0) rotate(-3.5deg)
			}
			
			8% {
				transform: translate(0, 0) rotate(4.5deg)
			}
			
			10% {
				transform: translate(0, 0) rotate(5.5deg)
			}
			
			12% {
				transform: translate(0, 0) rotate(-.5deg)
			}
			
			14% {
				transform: translate(0, 0) rotate(-4.5deg)
			}
			
			16% {
				transform: translate(0, 0) rotate(-3.5deg)
			}
			
			18% {
				transform: translate(0, 0) rotate(3.5deg)
			}
			
			20% {
				transform: translate(0, 0) rotate(4.5deg)
			}
			
			22% {
				transform: translate(0, 0) rotate(-.5deg)
			}
			
			24% {
				transform: translate(0, 0) rotate(4.5deg)
			}
			
			26% {
				transform: translate(0, 0) rotate(5.5deg)
			}
			
			28% {
				transform: translate(0, 0) rotate(4.5deg)
			}
			
			30% {
				transform: translate(0, 0) rotate(-6.5deg)
			}
			
			32% {
				transform: translate(0, 0) rotate(-3.5deg)
			}
			
			34% {
				transform: translate(0, 0) rotate(-4.5deg)
			}
			
			36% {
				transform: translate(0, 0) rotate(-4.5deg)
			}
			
			38% {
				transform: translate(0, 0) rotate(.5deg)
			}
			
			40% {
				transform: translate(0, 0) rotate(7.5deg)
			}
			
			42% {
				transform: translate(0, 0) rotate(-.5deg)
			}
			
			44% {
				transform: translate(0, 0) rotate(-6.5deg)
			}
			
			46% {
				transform: translate(0, 0) rotate(-2.5deg)
			}
			
			48% {
				transform: translate(0, 0) rotate(4.5deg)
			}
			
			50% {
				transform: translate(0, 0) rotate(1.5deg)
			}
			
			52% {
				transform: translate(0, 0) rotate(2.5deg)
			}
			
			54% {
				transform: translate(0, 0) rotate(5.5deg)
			}
			
			56% {
				transform: translate(0, 0) rotate(-.5deg)
			}
			
			58% {
				transform: translate(0, 0) rotate(-6.5deg)
			}
			
			60% {
				transform: translate(0, 0) rotate(-4.5deg)
			}
			
			62% {
				transform: translate(0, 0) rotate(3.5deg)
			}
			
			64% {
				transform: translate(0, 0) rotate(3.5deg)
			}
			
			66% {
				transform: translate(0, 0) rotate(-2.5deg)
			}
			
			68% {
				transform: translate(0, 0) rotate(-3.5deg)
			}
			
			70% {
				transform: translate(0, 0) rotate(7.5deg)
			}
			
			72% {
				transform: translate(0, 0) rotate(-4.5deg)
			}
			
			74% {
				transform: translate(0, 0) rotate(6.5deg)
			}
			
			76% {
				transform: translate(0, 0) rotate(3.5deg)
			}
			
			78% {
				transform: translate(0, 0) rotate(5.5deg)
			}
			
			80% {
				transform: translate(0, 0) rotate(.5deg)
			}
			
			82% {
				transform: translate(0, 0) rotate(2.5deg)
			}
			
			84% {
				transform: translate(0, 0) rotate(-6.5deg)
			}
			
			86% {
				transform: translate(0, 0) rotate(6.5deg)
			}
			
			88% {
				transform: translate(0, 0) rotate(-6.5deg)
			}
			
			90% {
				transform: translate(0, 0) rotate(-3.5deg)
			}
			
			92% {
				transform: translate(0, 0) rotate(-5.5deg)
			}
			
			94% {
				transform: translate(0, 0) rotate(-1.5deg)
			}
			
			96% {
				transform: translate(0, 0) rotate(.5deg)
			}
			
			98% {
				transform: translate(0, 0) rotate(.5deg)
			}
			
			0%,100% {
				transform: translate(0, 0) rotate(0)
			}
		}
		@keyframes text-e{
			2% {
				transform: translate(3px, 0) rotate(0)
			}
			
			4% {
				transform: translate(1px, 0) rotate(0)
			}
			
			6% {
				transform: translate(4px, 0) rotate(0)
			}
			
			8% {
				transform: translate(-2px, 0) rotate(0)
			}
			
			10% {
				transform: translate(9px, 0) rotate(0)
			}
			
			12% {
				transform: translate(0px, 0) rotate(0)
			}
			
			14% {
				transform: translate(-8px, 0) rotate(0)
			}
			
			16% {
				transform: translate(-7px, 0) rotate(0)
			}
			
			18% {
				transform: translate(1px, 0) rotate(0)
			}
			
			20% {
				transform: translate(-5px, 0) rotate(0)
			}
			
			22% {
				transform: translate(-2px, 0) rotate(0)
			}
			
			24% {
				transform: translate(-5px, 0) rotate(0)
			}
			
			26% {
				transform: translate(-1px, 0) rotate(0)
			}
			
			28% {
				transform: translate(3px, 0) rotate(0)
			}
			
			30% {
				transform: translate(-7px, 0) rotate(0)
			}
			
			32% {
				transform: translate(-8px, 0) rotate(0)
			}
			
			34% {
				transform: translate(4px, 0) rotate(0)
			}
			
			36% {
				transform: translate(8px, 0) rotate(0)
			}
			
			38% {
				transform: translate(-5px, 0) rotate(0)
			}
			
			40% {
				transform: translate(-6px, 0) rotate(0)
			}
			
			42% {
				transform: translate(7px, 0) rotate(0)
			}
			
			44% {
				transform: translate(1px, 0) rotate(0)
			}
			
			46% {
				transform: translate(3px, 0) rotate(0)
			}
			
			48% {
				transform: translate(10px, 0) rotate(0)
			}
			
			50% {
				transform: translate(1px, 0) rotate(0)
			}
			
			52% {
				transform: translate(3px, 0) rotate(0)
			}
			
			54% {
				transform: translate(-9px, 0) rotate(0)
			}
			
			56% {
				transform: translate(-8px, 0) rotate(0)
			}
			
			58% {
				transform: translate(7px, 0) rotate(0)
			}
			
			60% {
				transform: translate(2px, 0) rotate(0)
			}
			
			62% {
				transform: translate(-6px, 0) rotate(0)
			}
			
			64% {
				transform: translate(-9px, 0) rotate(0)
			}
			
			66% {
				transform: translate(-2px, 0) rotate(0)
			}
			
			68% {
				transform: translate(4px, 0) rotate(0)
			}
			
			70% {
				transform: translate(8px, 0) rotate(0)
			}
			
			72% {
				transform: translate(2px, 0) rotate(0)
			}
			
			74% {
				transform: translate(6px, 0) rotate(0)
			}
			
			76% {
				transform: translate(-4px, 0) rotate(0)
			}
			
			78% {
				transform: translate(4px, 0) rotate(0)
			}
			
			80% {
				transform: translate(9px, 0) rotate(0)
			}
			
			82% {
				transform: translate(6px, 0) rotate(0)
			}
			
			84% {
				transform: translate(-6px, 0) rotate(0)
			}
			
			86% {
				transform: translate(5px, 0) rotate(0)
			}
			
			88% {
				transform: translate(5px, 0) rotate(0)
			}
			
			90% {
				transform: translate(-4px, 0) rotate(0)
			}
			
			92% {
				transform: translate(0px, 0) rotate(0)
			}
			
			94% {
				transform: translate(-6px, 0) rotate(0)
			}
			
			96% {
				transform: translate(6px, 0) rotate(0)
			}
			
			98% {
				transform: translate(10px, 0) rotate(0)
			}
			
			0%,100% {
				transform: translate(0, 0) rotate(0)
			}
		}
		@keyframes text-f{
			0% {
			    color: #5cb85c;
			}
			25% {
			    color: #556bd8;
			}
			50% {
			    color: #e40707;
			}
			75% {
			    color: #aa557f;
			}
			100% {
			    color: #5cb85c;
			}
		}		
				//WebSite ww.maosan.fun
			//Aucthor QQ51543453
		//By MaoSan.
	//Vision 1.3
	// 2021/8/4
